import { reactive } from '@vue/composition-api'
import { getPlaceDataRequest } from '@/api/common'
export default function () {
  const optionData = reactive({
    provinceData: [],
    cityData: [],
    areaData: [],
    streetData: []
  })
  const pickerValue = reactive({
    provinceValue: '',
    cityValue: '',
    areaValue: '',
    streetValue: ''
  })
  const getOptionData = async (reqParams) => {
    const { data: res } = await getPlaceDataRequest(reqParams)
    optionData[`${reqParams.type}Data`] = res.data.data
  }
  const getProvinceData = () => {
    getOptionData({
      type: 'province'
    })
  }
  const getCityData = val => {
    resetOption(3)
    getOptionData({
      type: 'city',
      province_code: val
    })
  }
  const getAreaData = val => {
    resetOption(2)
    getOptionData({
      type: 'area',
      city_code: val
    })
  }
  const getStreetData = val => {
    resetOption(1)
    getOptionData({
      type: 'street',
      area_code: val
    })
  }
  const resetOption = (typeNumber) => {
    const type = ['street', 'area', 'city']
    for (let i = 0; i < typeNumber; i++) {
      optionData[`${type[i]}Data`] = []
      pickerValue[`${type[i]}Value`] = ''
    }
  }
  return {
    optionData,
    pickerValue,
    getProvinceData,
    getCityData,
    getAreaData,
    getStreetData
  }
}
